<template>
	<view class="tabbar">
		<div class="tabbar-list">
			<div class="tabbar-list-ul">
				<div class="tabbar-list-li" v-for="(item,index) in Tabbar.list" :key="index" @click="SetTbabbar(index)">
					<div class="tabbar-list-li-icon">
						<image :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
					</div>
					<div :class="selected == index ? 'tabbar-list-li-text active' : 'tabbar-list-li-text'">
						{{item.text}}
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default{
	props:['selected'],
	name:'My-Tabbar',
	data(){
		return{
			Tabbar:{
				list:[
					{
						pagePath:'/pages/index/index',
						iconPath:'/static/tabbar/home.png',
						selectedIconPath:'/static/tabbar/home-selected.png',
						text:'首页'
					},
					{
						pagePath:'/pages/interprocess/interprocess',
						iconPath:'/static/tabbar/process.png',
						selectedIconPath:'/static/tabbar/process-selected.png',
						text:'刷面试题'
					},
					{
						pagePath:'/pages/iterview/interview',
						iconPath:'/static/tabbar/question.png',
						selectedIconPath:'/static/tabbar/question-selected.png',
						text:'面试流程'
					},
					{
						pagePath:'/pages/Mycard/Mycard',
						iconPath:'/static/tabbar/contract.png',
						selectedIconPath:'/static/tabbar/contract-selected.png',
						text:'我得协议'
					},
					{
						pagePath:'/pages/MyHttp/MyHttp',
						iconPath:'/static/tabbar/card.png',
						selectedIconPath:'/static/tabbar/card-selected.png',
						text:'我的名片'
					},
				]
			}
		}
	},
	methods:{
		SetTbabbar(index){
			uni.switchTab({
				url:this.Tabbar.list[index].pagePath
			})
		}
	}
}
</script>

<style scoped>
	.tabbar{
		width: 100%;
		position: fixed;
		box-sizing: border-box;
	}
	.tabbar-list{
		width: 100%;
		color: #344356;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow: 0 -14px 34px 0 rgb(234,245,243,0.9);
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		}
	.tabbar-list-ul{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		align-items: center;
	}
	.tabbar-list-li-icon{
		width: 56rpx;
		height: 56rpx;
		margin: 0 auto;
		padding: 20rpx 0;
	}
	.tabbar-list-li-icon image{
		width: 100%;
		height: 100%;
	}
	.tabbar-list-li-text{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
	}
	.active{
		color: #5468ff;
	}
</style>
